<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <%@ include file="/WEB-INF/views/include/head.jsp"%> 
    <%@include file="/WEB-INF/views/include/treeview.jsp" %>
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
        <script type="text/javascript">
            var setting;
            var zNodes;
            var tree;
            //初始化
            $(document).ready(function(){
                // 下拉选框带搜索功能
                $("#roleSys").select2();
                $("#roleScope").select2();
                $("#roleType").select2();
                if ('${role.id==0||role.id==null}') {
                	$("#roleType").attr("disabled",true);
				}
                
                 setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
                            data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
                                tree.checkNode(node, !node.checked, true, true);
                                return false;
                            }}};
                // 用户-菜单
                 zNodes=[
                        <c:forEach items="${menuList}" var="menu">{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.menuName:'权限列表'}"},
                        </c:forEach>];
                // 初始化树结构
                 tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
                // 不选择父节点
                tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
                // 默认选择节点
                var ids = "${role.menuIds}".split(",");
                for(var i=0; i<ids.length; i++) {
                    var node = tree.getNodeByParam("id", ids[i]);
                    try{tree.checkNode(node, true, false);}catch(e){}
                }
                // 默认展开全部节点
                tree.expandAll(true);
               });
            
            
               //保存方法
              var saveForm={
                      s:null,
                      t:null,
                      save:function(s,t){
                          $(t).attr("disabled",true);
                          this.s=s;
                          this.t=t;
                          // 表单验证
                          $("#inputForm").validate({
                              submitHandler: function() {
                                  
                                  var ids = [], nodes = tree.getCheckedNodes(true);
                                  for(var i=0; i<nodes.length; i++) {
                                      ids.push(nodes[i].id);
                                  }
                                  $("#menuIds").val(ids);
                                  $("#roleType").attr("disabled",false);
                                  // 获取表单数据
                                  var params = $("#inputForm").serialize();
                                      // 通过ajax调用后台路径下方法
                                     $.post("${ctx}/database/role/save",params,function(result){
                                          // 提示信息
                                          tipParent(result.message);
                                          // 返回状态
                                          if(result.statusCode==STATUSCODEOK){
                                           
                                              if(saveForm.s==1){
                                                  // 重置表单
                                                  $("#inputForm")[0].reset();  
                                                  $(saveForm.t).attr("disabled",false);
                                                  $("#roleType").attr("disabled",true);
                                               // 刷新页面
                                                  window.parent.frames[0].searchListForm();
                                              }else{
                                                  // 刷新页面
                                                  window.parent.frames[0].searchListForm();
                                                  // 关闭页面
                                                  closeWin(); 
                                              }
                                            }else{
                                                $(saveForm.t).attr("disabled",false);
                                            }
                                       },'json'); 
                                  },
                              // 验证是否重名
                              rules: {
                                  roleName: {remote: "${ctx}/database/role/checkName?oldRoleName=" +$("#oldRoleName").val()},
                              },
                              messages: {
                                  roleName: {remote: '<spring:message code="role_name_exist"/>'},
                              },
                              fail: function(element,e) {  
                                  $(saveForm.t).attr("disabled",false);
                              }
                          });
                          // 表单提交
                          $("#inputForm").submit(); 
                      } 
                  }
        </script>
    </head>
    <body>
        <form id="inputForm" method="post">
        <!--头部-->
        <div class="layerHeader clearfix">
            <c:choose>
                <c:when test="${role.id!=null&&role.id!=''}">
                    <!-- 编辑 -->
                    <p class="headerTitle"><spring:message code="role_modifyRole"/></p>
                </c:when>
                <c:otherwise>
                    <!-- 新建 -->
                    <p class="headerTitle"><spring:message code="role_createRole"/></p>
                </c:otherwise>
            </c:choose>
            
                <!-- 关闭 -->
                <div class="headerButton clearfix" >
                        <shiro:hasPermission name="database:role:edit">
                            <button  type="button" onclick="saveForm.save(0,this)" ><spring:message code="role_save"/></button>
                            <c:if test="${empty role.id}">
                                <button  type="button"  onclick="saveForm.save(1,this)" ><spring:message code="role_saveAndcontinue"/></button>
                            </c:if>
                        </shiro:hasPermission>
                    <button type="button" onclick="closeWin()"><spring:message code="duty_edit_cancle"/></button>
                </div>
            
        </div>
        <input type="hidden" id="id" name="id" value="${role.id}"/>
        <input type="hidden" id="version" name="version" value="${role.version}"/>
        <input type="hidden" id="oldRoleName" name="oldRoleName" value="${role.roleName}"/>
        
            <div class="tabBoxSm">
                <div class="tabSm smOrderBox clearfix">
                    <div class="col-50 items clearfix haveToBox" >
                        <!-- 角色名称 -->
                        <p class="tit"><spring:message code="role_name"/></p>
                        <input type="text" id="roleName" name="roleName" value="${role.roleName}" maxlength="20" data-rule-chinese="true"  data-msg-chinese="<spring:message code="role_pleaseRoleName"/>" data-rule-required="true"  data-msg-required="<spring:message code="role_pleaseRoleName"/>" class="form-control fam" >
                        <p class="haveTo">*</p>
                    </div>
                    <div class="col-50 items right clearfix haveToBox">
                        <!-- 系统数据 -->
                        <p class="tit"><spring:message code="role_sysData"/></p>
                        <select id="roleSys" name="roleSys" class="sex" style="width: 150px" data-rule-required="true" data-msg-required="<spring:message code="role_pleaseSysData"/>">
                            <option value=""><spring:message code="role_pleaseSysData"/></option>
                            <option value="0" <c:if test="${role.roleSys eq 0}">selected="selected"</c:if> ><spring:message code="role_no"/></option>
                            <option value="1" <c:if test="${role.roleSys eq 1}">selected="selected"</c:if> ><spring:message code="role_yes"/></option>
                        </select>
                        <p class="haveTo">*</p>
                    </div>
                </div>
                <div class="tabSm smOrderBox clearfix">
                    <div class="col-50 items clearfix haveToBox" >
                        <!-- 数据范围 -->
                        <p class="tit"><spring:message code="role_dataField"/></p>
                        <select id="roleScope" name="roleScope" class="sex" style="width: 150px" data-rule-required="true" data-msg-required="<spring:message code="role_pleaseDataField"/>">
                            <option value=""><spring:message code="role_pleaseDataField"/></option>
                            <option value="1" <c:if test="${role.roleScope eq 1}">selected="selected"</c:if> ><spring:message code="role_dataField1"/></option>
                            <option value="2" <c:if test="${role.roleScope eq 2}">selected="selected"</c:if> ><spring:message code="role_dataField2"/></option>
                            <option value="3" <c:if test="${role.roleScope eq 3}">selected="selected"</c:if> ><spring:message code="role_dataField3"/></option>
                            <option value="4" <c:if test="${role.roleScope eq 4}">selected="selected"</c:if> ><spring:message code="role_dataField4"/></option>
                            <option value="5" <c:if test="${role.roleScope eq 5}">selected="selected"</c:if> ><spring:message code="role_dataField5"/></option>
                            <option value="6" <c:if test="${role.roleScope eq 6}">selected="selected"</c:if> ><spring:message code="role_dataField6"/></option>
                        </select>
                        <p class="haveTo">*</p>
                    </div>
                    <div class="col-50 right items clearfix haveToBox">
                        <!-- 角色类型 -->
                        <p class="tit"><spring:message code="role_type"/></p>
                        <select id="roleType" name="roleType" class="sex" style="width: 150px" data-rule-required="true" data-msg-required="<spring:message code="role_pleaseType"/>">
                            <option value=""><spring:message code="role_pleaseType"/></option>
                            <option value="1" <c:if test="${role.roleType eq 1}">selected="selected"</c:if> ><spring:message code="role_type1"/></option>
                            <option value="2" <c:if test="${role.roleType eq 2}">selected="selected"</c:if> ><spring:message code="role_type2"/></option>
                            <option value="3" <c:if test="${role.roleType eq 3}">selected="selected"</c:if><c:if test="${role.id eq 0||role.id eq null}">selected="selected"</c:if> ><spring:message code="role_type3"/></option>
                        </select>
                        <p class="haveTo">*</p>
                    </div>
                </div>
                <div class="tabSm smOrderBox clearfix" style="height: 400px">
                    <div class="col-50 items clearfix" style="float: left;">
                        <!-- 角色授权 -->
                        <p class="tit"><spring:message code="role_accredit"/></p>
                        <div id="menuTree" class="ztree" style="margin-top:3px;float:left;overflow: auto;height: 380px;width:300px"></div>
                        <input  type="hidden" id="menuIds" name="menuIds" value="${role.menuIds}" >
                    </div>
                    <div class="col-50 right items clearfix">
                        <!-- 描述 -->
                        <p class="tit"><spring:message code="role_description"/>
                        <span class="txtRg">(0/100)</span>
                        </p>
                        <div class="data_ip fl">
                            <textarea class="dsp" name="roleDescription" maxlength="100" style="height: 100px;width: 360px" value="${role.roleDescription}" >${role.roleDescription}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <script>
            var windowH = window.innerHeight
                    ||document.documentElement.clientHeight
                    ||document.body.clientHeight
            $('.middle').css('height',windowH - 40);
        </script>
    </body>
</html>